<template>
  <!-- 专利列表 -->
  <div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
      style="padding: 0 10px"
    >
      <el-tab-pane label="专利列表" name="0">
        <v-layout>
          <v-flex class="vflex" xs12>
            <v-card class="vcard">
              <!-- <v-card-title class="vcard-title"
                ><i></i>{{ $t("assessment.PatentList") }}</v-card-title
              > -->
              <v-flex class="vflex" xs12>
                <ul class="tab-info-title clearfix">
                  <li style="width: 150px; margin-right: 20px">
                    <el-select
                      v-model="na"
                      size="medium"
                      class="elselect"
                      @change="cl(0, na)"
                      :loading="loading"
                      @visible-change="visibleChange(0, 'na')"
                      :placeholder="$t('assessment.PatentType')"
                    >
                      <el-option
                        v-for="item in selectDataList[0].list"
                        :key="item.name"
                        :label="
                          item.name !== '全部'
                            ? `${item.key}（${item.doc_count}）`
                            : item.fullName
                        "
                        :value="item.key"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li style="width: 120px; margin-right: 20px">
                    <el-select
                      v-model="apd"
                      :loading="loading"
                      size="medium"
                      @change="cl(1, apd)"
                      @visible-change="visibleChange(1, 'apd')"
                      :placeholder="$t('assessment.ApplicationDate')"
                    >
                      <el-option
                        v-for="item in selectDataList[1].list"
                        :key="item.name"
                        :label="
                          item.name !== '全部'
                            ? `${item.key_as_string}（${item.doc_count}）`
                            : item.name
                        "
                        :value="item.key_as_string"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li style="width: 120px; margin-right: 20px">
                    <el-select
                      v-model="isd"
                      :loading="loading"
                      size="medium"
                      @change="cl(2, isd)"
                      @visible-change="visibleChange(2, 'isd')"
                      :placeholder="$t('assessment.Publication')"
                    >
                      <el-option
                        v-for="item in selectDataList[2].list"
                        :key="item.name"
                        :label="
                          item.name !== '全部'
                            ? `${item.key_as_string}（${item.doc_count}）`
                            : item.name
                        "
                        :value="item.key_as_string"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li style="width: 120px; margin-right: 20px">
                    <!-- @visible-change="visibleChange(5,'ls')" -->
                    <el-select
                      v-model="ls"
                      :loading="loading"
                      size="medium"
                      class="elselect"
                      @change="cl(5, ls)"
                      @visible-change="visibleChange(5, 'ls')"
                      :placeholder="$t('assessment.LegalStatus')"
                    >
                      <el-option
                        v-for="item in selectDataList[5].list"
                        :key="item.name"
                        :label="
                          item.name !== '全部'
                            ? `${item.key}（${item.doc_count}）`
                            : item.name
                        "
                        :value="item.key"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li style="width: 180px">
                    <el-select
                      v-model="icl"
                      :loading="loading"
                      size="medium"
                      class="elselect"
                      @change="cl(6, icl)"
                      @visible-change="visibleChange(6, 'icl')"
                      :placeholder="$t('assessment.IPCClassification')"
                    >
                      <el-option
                        v-for="item in selectDataList[6].list"
                        :key="item.name"
                        :label="
                          item.name !== '全部'
                            ? `${item.key}（${item.doc_count}）`
                            : item.name
                        "
                        :value="item.key"
                      >
                      </el-option>
                    </el-select>
                  </li>
                  <li style="margin-left: 20px">
                    <el-button type="primary" class="vtab-active" @click="reset"
                      >重置</el-button
                    >
                  </li>
                </ul>
              </v-flex>
              <!-- 专利列表 -->
              <v-flex class="vflex" xs12 v-loading="show">
                <ul class="disputes-list">
                  <li v-for="(item, index) in listData" :key="index">
                    <h3>
                      <p>
                        <router-link
                          v-show="isTranslate[index] === 'false'"
                          :to="{
                            name: 'patentDetails',
                            query: { pn: item.pn, active: 1 },
                          }"
                          tag="span"
                          >{{ item.title }}</router-link
                        >
                        <router-link
                          v-show="isTranslate[index] === 'true'"
                          :to="{
                            name: 'patentDetails',
                            query: { pn: item.pn, active: 1 },
                          }"
                          tag="span"
                          >{{ item.transT }}</router-link
                        >
                        <i class="translation" @click="translation(item, index)"
                          >译</i
                        >
                      </p>
                      <i v-if="item.pantentScore >= 30" class="high"
                        >{{ $t("assessment.ValueScore") }}：{{
                          item.pantentScore
                        }}分</i
                      >
                      <i v-if="item.pantentScore < 30" class="low"
                        >{{ $t("assessment.ValueScore") }}：{{
                          item.pantentScore
                        }}分</i
                      >
                    </h3>
                    <p class="clearfix">
                      <span class="light"
                        >{{ $t("assessment.OpenNo") }}：{{ item.pn }}</span
                      >

                      <span class="light"
                        >{{ $t("assessment.Applicant") }}：{{
                          item.an && item.an.toString()
                        }}</span
                      >
                      <span
                        >{{ $t("assessment.ApplicationDate") }}：{{
                          item.ad
                        }}</span
                      >
                      <span>IPC：{{ item.ipcm }}</span>
                    </p>
                    <p class="clearfix">
                      <span
                        >{{ $t("assessment.PatentType") }}：
                        <i>{{ item.patent_type }}</i>
                      </span>
                      <span class="light"
                        >{{ $t("assessment.Inventor") }}：{{
                          item.inventor && item.inventor.toString()
                        }}</span
                      >
                      <span
                        >{{ $t("assessment.PublicationDate") }}：{{
                          item.isd
                        }}</span
                      >
                      <span v-if="item.legal_status !== ''"
                        >{{ $t("assessment.LegalStatus") }}：{{
                          item.legal_status
                        }}</span
                      >
                    </p>
                  </li>
                </ul>
                <div class="pagination">
                  <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="total"
                    :page-size="ips"
                    :current-page.sync="currentPage"
                    @current-change="handleCurrentChange"
                    class="el-pagination"
                  ></el-pagination>
                </div>
              </v-flex>
            </v-card>
          </v-flex>
        </v-layout>
      </el-tab-pane>
      <el-tab-pane label="论文列表" name="1">
        <!-- 论文列表 -->
        <v-flex class="vflex" xs12 v-loading="show" style="padding-top: 20px">
          <ul class="disputes-list">
            <li v-for="(item, index) in paperDataList" :key="index">
              <h3>
                <p>
                  {{ item.title }}
                </p>
              </h3>
              <p class="clearfix">
                <span class="light"
                  >机构：{{ item.authors[0].org_zh || "--" }}</span
                >
                <span style="width: 40%"
                  >作者：
                  <i v-html="item.author"></i>
                </span>
                <span>发表时间：{{ item.article_year }}</span>
              </p>
              <p class="clearfix">
                <span class="light"
                  >期刊：
                  <i>{{ item.from_publication }}</i>
                </span>
                <span style="width: 40%">关键词：{{ item.keywords }}</span>
                <span>DOI：{{ item.doi }}</span>
              </p>
            </li>
            <p v-if="paperDataList.length == 0" class="noData">
              该企业暂无论文科研数据
            </p>
          </ul>
          <div class="pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="total"
              :page-size="ips"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChangeOrther"
              class="el-pagination"
            ></el-pagination>
          </div>
        </v-flex>
      </el-tab-pane>
      <el-tab-pane label="成果列表" name="2">
        <!-- 成果列表 -->
        <v-flex class="vflex" xs12 v-loading="show" style="padding-top: 20px">
          <ul class="disputes-list">
            <li v-for="(item, index) in achieveDataList" :key="index">
              <h3>
                <p>
                  {{ item.title }}
                </p>
              </h3>
              <p class="clearfix">
                <span style="width: 45%" class="light"
                  >完成单位：{{ item.achievement_institution }}</span
                >
                <span style="width: 45%" class="light"
                  >成果完成人：
                  {{ item.contrib_full_name && item.contrib_full_name.toString() }}
                </span>
              </p>
              <p class="clearfix">
                <span style="width: 45%"
                  >入库时间：
                  <i>{{ item.registered_date }}</i>
                </span>
                <span style="width: 45%"
                  >关键词：{{ item.keywords && item.keywords.toString() }}</span
                >
              </p>
            </li>
            <p v-if="achieveDataList.length == 0" class="noData">
              该企业暂无成果科研数据
            </p>
          </ul>
          <div class="pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="total"
              :page-size="ips"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChangeOrther"
              class="el-pagination"
            ></el-pagination>
          </div>
        </v-flex>
      </el-tab-pane>
      <el-tab-pane label="标准列表" name="3">
        <!-- 标准列表 -->
        <v-flex class="vflex" xs12 v-loading="show" style="padding-top: 20px">
          <ul class="disputes-list">
            <li v-for="(item, index) in standardDataList" :key="index">
              <h3>
                <p>
                  {{ item.title }}
                </p>
              </h3>
              <p class="clearfix">
                <span class="light"
                  >起草单位：{{ item.drafting_unit && item.drafting_unit.toString() }}</span
                >
                <span>发起人：{{ item.draftsman && item.draftsman.toString() }}</span>
              </p>
              <p class="clearfix">
                <span
                  >发布日期：
                  <i>{{ item.issue_date }}</i>
                </span>
                <span>标准状态：{{ item.status }}</span>
              </p>
            </li>
            <p v-if="standardDataList.length == 0" class="noData">
              该企业暂无标准科研数据
            </p>
          </ul>
          <div class="pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="total"
              :page-size="ips"
              :current-page.sync="currentPage"
              @current-change="handleCurrentChangeOrther"
              class="el-pagination"
            ></el-pagination>
          </div>
        </v-flex>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      companyName: this.$cookie.get("companyName") || "",
      na: "",
      apd: "",
      isd: "",
      ls: "",
      icl: "",
      clName: "",
      current: "",
      patentTypeName: "0",
      ights: true,
      owns: false,
      isdown: true,
      total: 0,
      listData: [],
      ips: 10,
      currentPage: 1,
      isShowScreen: false,
      selectDataList: [],
      translationList: [],
      isTranslate: [],
      show: false,
      loading: false,
      activeName: 0, //

      paperDataList: [],
      standardDataList: [],
      achieveDataList: [],
      searchType: "",
    };
  },
  mounted() {
    this.initData();
    this.getAjaxData({}, []);
  },
  activated() {},
  methods: {
    // 重置
    reset() {
      if (
        this.na == "" &&
        this.apd == "" &&
        this.isd == "" &&
        this.ls == "" &&
        this.icl == ""
      ) {
        return;
      }
      this.initData();
      this.mustAndrandarr();
    },
    initData() {
      this.na = "";
      this.apd = "";
      this.isd = "";
      this.ls = "";
      this.icl = "";
      this.total = 0;
      this.show = false;
      this.loading = false;
      this.listData = [];
      this.ips = 10;
      this.currentPage = 1;
      this.selectDataList = [
        {
          name: this.$t("assessment.PatentType"),
          code: "na",
          list: [],
        },
        {
          name: this.$t("assessment.ApplicationDate"),
          code: "apd",
          list: [],
        },
        {
          name: this.$t("assessment.Publication"),
          code: "isd",
          list: [],
        },

        {
          name: this.$t("assessment.Applicant"),
          code: "an",
          list: [],
        },
        {
          name: this.$t("assessment.Inventor"),
          code: "in",
          list: [],
        },
        {
          name: this.$t("assessment.LegalStatus"),
          code: "ls",
          list: [],
        },
        {
          name: this.$t("assessment.IPCClassification"),
          code: "icl",
          list: [],
        },
      ];
    },
    // 筛选项查询
    cl(index, name) {
      this.currentPage = 1;
      this.current = index;
      // 选择全部则sq需要传空
      /**if(name.fullName==='全部'||name.name==='全部'||name==='全部') {
        this.clName = ''
      }else if(typeof name==='object'){
        // 专利类型比较特殊，需要传数据中的name，name是数字，其他筛选正常传name，name是名称
        this.clName = name.name
      }else{
        this.clName = name
      }**/
      this.mustAndrandarr();
    },
    // 更改页条数
    /**handleSizeChange(val) {
      this.ips = val
      this.mustAndrandarr()
    },**/
    // 翻页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.mustAndrandarr();
    },
    // 翻页
    handleCurrentChangeOrther(val) {
      this.currentPage = val;
      this.getataList();
    },
    mustAndrandarr() {
      this.show = true;
      let arr = [
        { value: this.na, key: "this.na" },
        { value: this.ls, key: "this.ls" },
        { value: this.icl, key: "this.icl" },
        { value: this.apd, key: "this.apd" }, // 申请日
        { value: this.isd, key: "this.isd" }, // 公开日
      ];
      let arrNum = {};
      // let Date_json = {}
      let date = [];
      for (let i in arr) {
        if (
          arr[i].value !== undefined &&
          arr[i].value !== "" &&
          arr[i].value !== null
        ) {
          if (arr[i].key === "this.na") {
            // 专利类型
            arrNum.patent_type = arr[i].value;
          } else if (arr[i].key === "this.ls") {
            // 法律状态
            if (arr[i].value === "其它") {
              arrNum.legal_status = "";
            } else {
              arrNum.legal_status = arr[i].value;
            }
          } else if (arr[i].key === "this.icl") {
            // ipc
            arrNum.ipcm = arr[i].value;
          } else if (arr[i].key === "this.apd") {
            // 申请日
            date.push({
              field: "ad", // isd公开日 ad 申请日
              start: (arr[i].value ?  arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ?  arr[i].value : "2023") + "-12-31",
            });
          } else if (arr[i].key === "this.isd") {
            // 公开日
            date.push({
              field: "isd", // isd公开日 ad 申请日
              start: (arr[i].value ?  arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ?  arr[i].value : "2023") + "-12-31",
            });
          }
        }
      }
      this.getAjaxData(arrNum, date);
    },
    // 聚类 筛选列表
    /**getCheckedList(index, code){
      let searchTxt = ''
      this.$post(this.$Url.patent.checkedList,{
        dataType: "sql",
        foo: "SEARCH-MASTER",
        idi: "274766528119",
        scontent: `${code}%30%↵data%ct%`,
        sf: "QueryFulltextAnalysis",
        showType: "second",
        sl: "chs",
        companyName: this.companyName,
        sq: '',
        sx: "cn/queryrelated-searchmaster_cn"
      }).then(data => {
        let result = data.data.sResult.data
        // 申请日 和 公开/公告日排序
        if(code==='apd' || code==='isd'){
          result.sort((a, b) => {
            return a.name - b.name
          })
        }
        let results = [].concat({fullName: '全部', name: '全部', value: '全部'}).concat(result)
        this.$set(this.selectDataList[index], 'list', results)
      }).catch(error => {
        console.log(error);
      })
    },**/
    visibleChange(index, code) {
      //if(this.selectDataList[index].list.length<=0){
      this.loading = true;
      this.getCheckedList(index, code);
      //}
    },
    getCheckedList(index, code) {
      let arr = [
        { value: this.na, key: "this.na" },
        { value: this.ls, key: "this.ls" },
        { value: this.icl, key: "this.icl" },
        { value: this.apd, key: "this.apd" }, // 申请日
        { value: this.isd, key: "this.isd" }, // 公开日
      ];
      let arrNum = { date_sort: "1" };
      let date = [];
      for (let i in arr) {
        if (
          arr[i].value !== undefined &&
          arr[i].value !== "" &&
          arr[i].value !== null
        ) {
          if (arr[i].key === "this.na") {
            // 专利类型
            arrNum.patent_type = arr[i].value;
          } else if (arr[i].key === "this.ls") {
            // 法律状态
            if (arr[i].value === "其它") {
              arrNum.legal_status = "";
            } else {
              arrNum.legal_status = arr[i].value;
            }
          } else if (arr[i].key === "this.icl") {
            // ipc
            arrNum.ipcm = arr[i].value;
          } else if (arr[i].key === "this.apd") {
            // 申请日
            date.push({
              field: "ad", // isd公开日 ad 申请日
              start: (arr[i].value ?  arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ?  arr[i].value : "2023") + "-12-31",
            });
          } else if (arr[i].key === "this.isd") {
            // 公开日
            date.push({
              field: "isd", // isd公开日 ad 申请日
              start: (arr[i].value ?  arr[i].value : "2023") + "-01-01",
              end: (arr[i].value ?  arr[i].value : "2023") + "-12-31",
            });
          }
        }
      }
      let aggJson = {};
      if (index === 0) {
        aggJson = {
          //发明类型聚类
          size: "20",
          field: "patent_type",
          interval: "",
          format: "",
          type: "base",
        };
      } else if (index === 1) {
        aggJson = {
          // 申请日聚类
          size: "",
          field: "ad",
          interval: "YEAR",
          format: "yyyy",
          type: "date",
        };
      } else if (index === 2) {
        aggJson = {
          // 公开日聚类
          size: "",
          field: "isd",
          interval: "YEAR",
          format: "yyyy",
          type: "date",
        };
      } else if (index === 5) {
        aggJson = {
          //  法律状态聚类
          size: "",
          field: "legal_status",
          interval: "",
          format: "",
          type: "base",
        };
      } else if (index === 6) {
        aggJson = {
          // ipc聚类
          size: "",
          field: "ipcm",
          interval: "",
          format: "",
          type: "base",
        };
      }
      this.$post(this.$Url.compaines.SingleKind, {
        companyName: this.companyName,
        aggs: aggJson,
        musts: arrNum,
        rangArr: date,
      })
        .then((data) => {
          let result = data.data;
          // console.log(result)
          // 申请日 和 公开/公告日排序
          if (code === "apd" || code === "isd") {
            result.sort((a, b) => {
              return b.key_as_string - a.key_as_string;
            });
          }
          let results = []
            .concat({ fullName: "全部", name: "全部", value: "全部" })
            .concat(result);
          // console.log(results)
          results.forEach((x) => {
            if (x.key === "") {
              x.key = "其它";
            }
          });
          this.$set(this.selectDataList[index], "list", results);
          // console.log(this.selectDataList)
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    // 获取专利列表
    getAjaxData(arrNum, date) {
      // console.log(arrNum,date)
      this.$post(this.$Url.patent.SingleCompany, {
        companyName: this.companyName,
        ipi: this.currentPage,
        ips: this.ips,
        musts: arrNum,
        rang: date,
      })
        .then((data) => {
          this.show = false;
          this.listData = data.data.result;
          this.isTranslate = [];
          for (let i = 0; i < this.listData.length; i++) {
            this.isTranslate.push("false");
          }

          this.total = data.data.page.totalRow || 0;
          for (let i = 0; i < this.listData.length; i++) {
            let p = this.listData[i].pn;
            let that = this;

            this.getPantentScoreCount(p, function (data) {
              that.$set(
                that.listData[i],
                "pantentScore",
                data.data ? data.data : "0"
              );
            });
          }
        })
        .catch((error) => {
          this.show = false;
          console.log(error);
        });
    },
    // 获取摘要
    getAbst(pn, fn) {
      this.$post(this.$Url.patent.abst, {
        iopt: 7,
        sf: "QueryAbst",
        spn: pn,
      })
        .then((data) => fn(data))
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取计算分值
    /* getPatentScore(p,fn){
      this.$get(this.$Url.patent.patentScore,{
        pn: p
      }).then(data => fn(data)).catch(err => {
        // console.log(err);
      })
    }, */
    // 重新获取分数 zjs/2020/03/12
    getPantentScoreCount(p, fn) {
      this.$get(this.$Url.patent.pantentScoreCount, {
        pn: p,
      })
        .then((data) => fn(data))
        .catch((err) => {
          // console.log(err);
        });
    },

    // 翻译
    translation(item, index) {
      let transT = this.listData[index].transT || "";
      if (transT !== "") {
        if (this.isTranslate[index] === "false") {
          this.$set(this.isTranslate, index, "true");
        } else {
          this.$set(this.isTranslate, index, "false");
        }
      } else if (transT === "") {
        let pro1 = this.translateFn(item.title);
        pro1.then((res) => {
          this.$set(this.listData[index], "transT", res);
          this.$set(this.isTranslate, index, "true");
        });
      }
    },
    translateFn(text) {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.patent.translat, {
          text: text,
        })
          .then((data) => {
            let text = data.data.translation[0].translated[0].text || "";
            resolve(text);
          })
          .catch((err) => {
            reject(err);
          });
      });
      return promise;
    },
    //点击tab切换
    handleClick(tab, event) {
      this.currentPage = 1;
      if (tab.index > 0) {
        this.searchType = tab.index;
        this.getataList(tab.index);
      }else{
        this.mustAndrandarr();
      }
    },
    // 获取科研成果列表
    getataList(type) {
      this.paperDataList = [];
      this.achieveDataList = [];
      this.standardDataList = [];
      //中南大学  安徽鼎晖新能源科技有限公司  中国标准化研究院
      this.$get(this.$Url.EI.otherDocument, {
        companyName: this.companyName,
        // companyName: "中南大学",
        ipi: this.currentPage,
        ips: this.ips,
        documentType: this.searchType,
        // documentType: "1",
      })
        .then((res) => {
          this.total = res.data.result.length;
          this.show = false;
          if (type === "1") {
            let result = res.data.result || [];
            let origList = [];
            result.forEach((v, index) => {
              const { authorStr, organStr } = this.getAuthors(v.authors);
              let obj = {
                ...v,
                id: v.id || "",
                esId: v.esId || "",
                title: v.title_zh || v.title || "-", // 标题
                title_en: v.title_ori || v.title || "-", // 标题
                from_publication: v.venue_name || "-", // 出版物
                article_year: v.year || "-", // 出版年
                keywords: this.getKeyWords(v) || "-",
                author: authorStr || "-",
                organ: organStr || "-", // 摘要,
              };
              origList.push(obj); // 原始数据
            });
            this.paperDataList = origList;
          } else if (type === "2") {
            this.achieveDataList = res.data.result;
          } else if (type === "3") {
            this.standardDataList = res.data.result;
          }
        })
        .catch((error) => {
          this.show = false;
          console.log(error);
        });
    },
    getAuthors(list) {
      let authorStr = "",
        organList = [],
        organStr = "";
        list.forEach((li, idx) => {
        if (li.org_zh || li.org) {
          if (organList.indexOf(li.org_zh || li.org) == -1) {
            organList.push(li.org_zh || li.org);
          }
        }
        let i = organList.indexOf(li.org_zh || li.org) + 1;
        authorStr += `${idx > 0 ? "，" : ""}${li.name_zh || li.name}<sup>${
          i == 0 ? "" : i
        }</sup>`;
      });
      organList.forEach((list, idx) => {
        organStr += `${idx == 0 ? "" : "，"}${idx + 1}.${list}`;
      });
      return { authorStr, organStr };
    },
    getKeyWords(v) {
      if (v.hasOwnProperty("keywords_zh")) {
        return v.keywords_zh.join("，");
      } else if (v.hasOwnProperty("keywords")) {
        return v.keywords.join("，");
      } else {
        return "-";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-tabs .el-tabs__header .el-tabs__item.is-top{
  color: #333 !important;
}
::v-deep.el-select .el-input__inner{
  background-color: rgba(3, 179, 140,0.07) !important;
}
.flex {
  display: block;
}
.vflex {
  margin-bottom: 20px;
  background: #fff;
}
.vflex.right {
  margin-right: 15px !important;
}
.vcard {
  width: 100%;
  height: 100%;
}
.vcard-title {
  position: relative;
  padding-top: 20px !important;
  font-size: 16px;
  font-weight: 600;
  color: $mainColor;
}
.vcard-title i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 20px;
  margin-top: -8px;
  background-color: $mainColor;
}
.tab-info-title {
  padding-left: 0;
  margin: 0 20px 30px;
  list-style: none;
  padding-top: 20px;
}
.tab-info-title li {
  display: block;
  float: left;
  line-height: 40px;
  font-weight: 600;
}
.elselect {
  width: 100%;
}
.disputes-list {
  padding-left: 0;
  margin: 10px 20px;
  list-style: none;
}
.disputes-list li {
  display: block;
  padding-bottom: 10px;
  margin-bottom: 24px;
  border-bottom: 1px dashed #bfbfee;
}
.disputes-list li:last-child {
  border-bottom-color: transparent;
}
.disputes-list h3 {
  position: relative;
  width: 100%;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 16px;
  color: $mainColor;
}
.disputes-list h3 > p {
  position: relative;
  margin-right: 130px;
}
.disputes-list h3 > p > span {
  vertical-align: middle;
  cursor: pointer;
}
.disputes-list .translation {
  padding: 2px 7px;
  margin-left: 10px;
  border: 1px solid $mainColor;
  border-radius: 3px;
  vertical-align: middle;
  font-style: normal;
  font-size: 12px;
  color: $mainColor;
  background-color: #fff;
  cursor: pointer;
}
.disputes-list .translation:hover {
  border-color: $mainColor;
  color: #fff;
  background-color: $mainColor;
}
.disputes-list h3 > i {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 14px;
  border-radius: 4px;
  text-align: center;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
}
.low {
  background-color: #c44b5c;
}
.high {
  background-color: #34ae9b !important;
}
.disputes-list li > p {
  width: 100%;
  margin-bottom: 8px;
}
.disputes-list li > p span {
  float: left;
  display: block;
  margin-right: 1%;
  font-size: 12px;
  color: #7674a3;
}
.disputes-list li > p span:nth-child(1) {
  width: 20%;
}
.disputes-list li > p span:nth-child(2) {
  width: 30%;
}
.disputes-list li > p span:nth-child(3) {
  width: 30%;
}
.disputes-list li > p span:nth-child(4) {
  width: 120px;
}
.light {
  color: $mainColor !important;
}
.disputes-list li > p span i {
  font-style: normal;
}
.abstract {
  line-height: 26px;
  margin-top: 8px;
  font-size: 14px;
  word-wrap: break-word;
  word-break: break-all;
  color: #7674a3;
}
.align-center {
  text-align: center;
}
.pagination {
  text-align: center;
}
.noData {
  text-align: center;
  font-size: 16px;
  height: 300px;
  color: #a6a6a6;
  line-height: 300px;
}
</style>
<style>
.el-tabs__header,
.el-tabs__active-bar {
  z-index: 0 !important;
  padding: 0 20px 0 0;
}
.el-tabs__nav-scroll {
  height: 50px !important;
}
</style>
